<!-- 积分签到 -->
<template>
	<view class="score_task">
		<view class="score_task_content">
			<!-- 头部背景 -->
			<view class="head_bg"></view>
			<!-- 签到 -->
			<view class="sign_in">
				<view class="sign_in_box">
					<view class="text">
						已连续签到
						<span>{{ sign_in.num }}</span>天
					</view>
					<view class="sign_in_content">
						<view class="part" v-for="(item,index) in sign_in.date" :key="index" :class="(change_color && item.date == getWeekDate()) || item.status ? 'sign_in_color' : ''">
							<view class="circle">+{{ item.num1 }}</view>
							<view class="date">{{ item.date }}</view>
						</view>
					</view>
					<view class="button" @click="change">
						<span v-if="status === false">签到</span>
						<span v-if="status === true">已签到</span>
					</view>
				</view>
			</view>
			<!-- 当前积分 -->
			<view class="integral">
				<view class="integral_box">
					<view class="text">
						<p>{{ integral_num }}</p>
						<span>当前积分</span>
					</view>
					<view class="button" @click="toTabbar(integral_url)">
						<span>去兑换</span>
					</view>
				</view>
			</view>
			<!-- 积分任务 -->
			<view class="task">
				<view class="task_box">
					<view class="title">
						<p>积分任务</p>
						<span>做任务赚积分</span>
					</view>
					<view class="part" v-for="(item,index) in task" :key="index">
						<view class="left">
							<p>{{ item.text }}</p>
							<span>积分{{ item.num }}</span>
						</view>
						<view class="right" @click="receive(item)">
							<span v-if="item.status===1" >去完成</span>
							<span v-else-if="item.status===2" class="receive" >领取</span>
							<span v-else-if="item.status===3" class="already_receive" >已领取</span>
						</view>
					</view>
				</view>
			</view>
			<!-- 领取状态  0：成功  1：失败 -->
			<view class="popup" v-if="receive_status" @touchmove.stop.prevent="">
				<view class="transparent" @click="receive_status = false"></view>
				<view class="popup_box">
					<view class="icon" :class="receive_popup.status == 1 ? 'fail_icon' : ''"></view>
					<view class="text">{{ receive_popup.status == 0 ? receive_popup.success_text : receive_popup.fail_text }}</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		components: {},
		data() {
			return {
				// 签到
				count: 0,						
				change_color: false,			// 更改签到后的样式
				status: false,                  // 切换签到，把签到变成已签到
				// 签到数据
				sign_in: {
					num: 0,						// 签到的天数
					date: [{
							id: 0,
							num1: 3,
							date: "周一",
							status: false
						},
						{
							id: 1,
							num1: 3,
							date: "周二",
							status: false
						},
						{
							id: 2,
							num1: 3,
							date: "周三",
							status: false
						},
						{
							id: 3,
							num1: 3,
							date: "周四",
							status: false
						},
						{
							id: 4,
							num1: 3,
							date: "周五",
							status: false
						},
						{
							id: 5,
							num1: 3,
							date: "周六",
							status: false
						},
						{
							id: 6,
							num1: 3,
							date: "周天",
							status: false
						},
					],
				},
				// 当前积分
				integral_num: 999999,
				integral_url: '/pages/home_index/index',
				// 积分任务 status:1去完成，2领取积分，3，已领取
				task: [{
						id: 0,
						text: "手机银行签约",
						num: 10,
						status: 1,
					},
					{
						id: 1,
						text: "手机银行签约",
						num: 10,
						status: 2,
					},
					{
						id: 2,
						text: "手机银行签约",
						num: 10,
						status: 3,
					}
                    
				],
				// 领取状态
				receive_status: false,
				receive_popup: {
					status: 0,
					success_text: "领取成功",
					fail_text: "领取失败"
				}
			};
		},
		watch: {
			status(val) {
				if(val) {
					this.sign_in.num += 1
				}
			}
		},
		computed: {},
		methods: {
			getWeekDate() {
				var day = new Date().getDay();
				var weeks = new Array(
					"周日",
					"周一",
					"周二",
					"周三",
					"周四",
					"周五",
					"周六"
				);
				return weeks[day];
			},
			change() {
				this.count++
				if (this.count > 0) {
					this.status = true
				}
				this.change_color = true
			},
			toTabbar(val) {
				uni.switchTab({
					url: val
				})
			},
			// 积分任务状态点击
			receive(item) {
				if (item.status === 2) {
					this.receive_status = true
					if(this.receive_popup.status === 0){
						item.status = 3
					}
				}
			},
		},
		beforeCreate() {},
		created() {},
		beforeMount() {},
		mounted() {},
		beforeUpdate() {},
		updated() {},
		beforeDestroy() {},
		destroyed() {},
	};
</script>
<style scoped lang='scss'>
	@import "./index.scss";

	.sign_in_color {
		background-color: #ff4642 !important;
		box-shadow: 0px 8rpx 8rpx 0px rgba(255, 70, 66, 0.3);

		.circle {
			background-color: #ff2622 !important;
			color: #fff !important;
		}

		.date {
			color: #fff !important;
			box-shadow: 0px 8rpx 8rpx 0px rgba(255, 70, 66, 0.3);
		}
	}

	.receive {
		border: none !important;
		color: #fff !important;
		background: linear-gradient(to right, #FF504C, #FF977B);
	}

	.already_receive {
		border: none !important;
		color: #999 !important;
		background-color: #F8F8FB;
	}
</style>
